<template>
    <div id="list">
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        active-text-color= '#409EFF'
        :router="aaa"
        @open="handleOpen"
        @close="handleClose">
            <el-menu-item index="/home" class="el-icon-s-home">首页</el-menu-item>
        <el-submenu index="1-1">
            <template slot="title"> <i class="el-icon-menu"></i> 商品管理</template>
            <el-menu-item index="/commodity_1">选品入库</el-menu-item>
            <el-menu-item index="/commodity_2">商品列表</el-menu-item>
        </el-submenu>

            <el-menu-item index="/indent" class="el-icon-s-order">订单管理</el-menu-item>

            <el-menu-item index="/after" class="el-icon-bell">售后管理</el-menu-item>
        
            <el-menu-item index="/finance" class="el-icon-folder-opened">财务管理</el-menu-item>
            <el-menu-item index="/user" class="el-icon-user">用户管理</el-menu-item>
            <el-menu-item index="/diy" class="el-icon-crop">DIY设置</el-menu-item>

        
        </el-menu>
    </div>
</template>

<script>
export default {
  data() {
    return {
      aaa: true,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss" scoped>
#list{
    color: #333333;
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
    *:before{
        font-size: 20px;
        margin-right: 10px;
    }
    .el-submenu .el-menu-item{
        min-width: 100%;
    }
    .is-active{
      color: rgba(33, 61, 192, 1);
      box-sizing: border-box;
    }
   li.el-menu-item{
     width: 100%;
   }
}
    
</style>